Mr笔记

Appearance

S30-01 拓展-Tampermonkey ​

[TOC]

基础 ​

概述 ​

Tampermonkey 是一种流行的用户脚本管理器，广泛用于各大浏览器如 Chrome、Firefox、Safari 和 Microsoft Edge。

用户脚本是一种用JavaScript编写的浏览器脚本，可以修改网页上的内容、添加新功能或自定义网页行为。

安装 ​

翻墙版：

方式一：进入官网 Tampermonkey，选择对应的浏览器版本，直接点击【下载】，完成安装

方式二：直接在 谷歌应用商店 搜索 Tampermonkey 并添加为扩展程序。


墙内版：

懒得找。

基本使用 ​

image-20250118113801322

获取新脚本 ​

点击菜单下的 获取新脚本 跳转到油猴脚本市场搜索需要的脚本安装。

image-20250118114143681

添加新脚本 ​

点击菜单下的 添加新脚本 自己编写脚本。

元信息 ​

索引 ​

基本：

  • @name：必填，脚本的名称。该项将显示在页面的标题以及链接内容。
  • @namespace：，脚本的命名空间。和@name一起组成脚本的唯一标识符。供用户脚本管理器、Greasy Fork判断一个脚本是否已安装。
  • @version：，脚本的版本。
  • @description：必填，脚本功能的描述，显示在脚本标题下面，必填项。
  • @author：，作者信息。
  • @icon：，脚本显示图标。

匹配规则：

  • @match：，用于指定脚本适用的网页地址或匹配规则，可以使用通配符 * 来匹配多个页面。

    js
    // @match        https://*.example.com/*
// @match        http://example.com/*
// @match        https://example.com/path/to/page*

  • @include：，与 @match 类似，它更加灵活，支持使用正则表达式来定义匹配规则。

    js
    // @include      /^https?:\/\/.*\.example\.com\/.*$/

  • @exclude：，用于排除某些URL模式，即使它们符合 @match 或 @include 的规则。通常用于限制脚本运行的范围。

    js
    // @exclude      https://example.com/ignore-this-page

引入外部资源：

  • @require：，用于在油猴脚本中引入外部脚本或库文件。如jquery、lodash、axios等。外部资源会在脚本执行之前加载。

    js
    // @require      https://code.jquery.com/jquery-3.6.0.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js

  • @resource：，用于预加载外部资源并将其嵌入到脚本中。如CSS文件、图像、JSON文件等。可以在没有网络连接的情况下使用这些资源。

    • 1、使用 @resource 注释来指定资源的名称和URL

      js
      // @resource     customCSS https://example.com/style.css
// @resource     logo https://example.com/logo.png

    • 2、使用 GM_getResourceURL 或 GM_getResourceText 函数来获取资源的内容或URL

      js
      const cssURL = GM_getResourceURL('customCSS');
const logoURL = GM_getResourceURL('logo');
const cssText = GM_getResourceText('customCSS');

权限：

  • @grant：，指定脚本需要的权限或特权。告诉油猴脚本引擎为你的脚本提供特定的 API 权限，以便你可以在脚本中使用这些 API。常见的@grant指令：
    • none：``，脚本不需要任何特殊权限，默认情况下，脚本只能访问网页的 DOM。
    • GM_addStyle：``，脚本需要使用 GM_addStyle 函数来添加自定义样式。
    • GM_getValue、GM_setValue：``，脚本需要使用 GM_getValue 和 GM_setValue 函数来进行数据存储和读取。
    • GM_listValues：``，允许脚本列出所有已存储的值的键名。
    • GM_xmlhttpRequest：``，脚本需要使用 GM_xmlhttpRequest 函数来进行跨域请求。
    • GM_notification ：``， 允许脚本显示桌面通知。
    • unsafeWindow：``，脚本需要访问页面的 unsafeWindow 对象，这是一个潜在的安全风险，需要谨慎使用。

执行时机：

  • @run-at：，用于指定脚本的执行时机。控制脚本在页面加载的不同阶段执行。
    • document-start：脚本将在页面开始加载时执行，DOM 还没有完全加载。
    • document-end：默认，脚本将在页面完全加载并解析完 DOM 之后执行，但可能在某些外部资源（如图片、视频等）加载完成之前。
    • document-idle：脚本将在浏览器认为页面加载空闲时执行。此时页面渲染、所有资源都已加载完成，且浏览器处于空闲状态。
    • context-menu：脚本会在用户右键点击时执行。这个值通常用于创建自定义的右键菜单选项。

GM函数 ​

油猴提供了一组丰富的API，用于开发和管理用户脚本。这些API可以帮助脚本与页面交互、修改页面内容、访问外部资源等。

注意：

  • API函数以GM_开头，GM表示Greasemonkey。
  • GM_函数在使用之前，都需要通过@grant指令赋予权限才能使用。

常用：

  • GM_addStyle()：(css)，用于动态添加样式规则到页面中。

    js
    GM_addStyle(`
    body {
        background-color: #f0f0f0;
    }
`);

  • GM_setValue()：(key,value)，用于在用户脚本之间存储持久化数据。

    js
    GM_setValue('myKey', 'myValue');

  • GM_getValue()：(key)，用于在用户脚本之间获取持久化数据。

    js
    const value = GM_getValue('myKey');
GM_log('Stored value:', value);

  • GM_listValues()：()，列出所有存储的键。

    js
    // 列出所有键
const keys = GM_listValues();
console.log('Stored keys:', keys);

  • GM_deleteValue()：(key)，删除存储的数据。

    js
    GM_deleteValue('myKey');

  • GM_xmlhttpRequest()：(option)，用于发送跨域的 XMLHTTPRequest 请求。没有跨域拦截问题。

    js
    GM_xmlhttpRequest({
    method: 'GET',
    url: 'https://api.example.com/data',
    onload: function(response) {
        console.log(response.responseText);
    },
    onerror: function(error) {
        console.error('Request failed:', error);
    }
});

  • GM_getResourceText()：(name)，获取引入的资源文件的文本内容。

  • GM_getResourceURL()：(name)，获取引入的资源文件的源地址。

    js
    // @resource     customCSS https://example.com/style.css
// @resource     logo https://example.com/logo.png

const cssURL = GM_getResourceURL('customCSS');
const logoURL = GM_getResourceURL('logo');
const cssText = GM_getResourceText('customCSS');

其他：

  • GM_notification()：(option)， 用于显示桌面通知。

    js
    GM_notification({
    text: 'This is a notification',
    title: 'Notification Title',
    timeout: 4000
});

  • GM_log()：(info)，输出调试信息到控制台，类似于console.log。

  • GM_info：object，返回当前脚本的元数据信息，如脚本名称、版本号等。

    js
    var scriptInfo = GM_info.script;

  • GM_registerMenuCommand()：(name, callback)，用于在油猴菜单中注册自定义命令。

    js
    GM_registerMenuCommand('Show Alert', function() {
    alert('Hello, world!');
});

  • GM_openInTab()：(url,option)，用于在新标签页或新窗口中打开指定的 URL。

    js
    GM_openInTab('https://example.com', { active: true });

  • GM_setClipboard()：(data)，用于将文本复制到剪贴板。

    js
    // 设置一个固定文本到剪贴板中
GM_setClipboard("Hello, world!");

// 使用变量设置剪贴板内容
var data = "This is the data I want to copy.";
GM_setClipboard(data);

不以GM_开头：

  • unsafeWindow：object，直接访问页面的全局对象，允许脚本与页面的JS代码进行交互。需注意安全性。

  • window：object，常规的JS window对象，同样适用于油猴脚本。

进阶 ​

使用插件 ​

jquery ​

1、通过@require 引入jquery插件的CDN地址

js
// @require      https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js

2、在代码区添加注释：/* globals jQuery, $, waitForKeyElements */

否则会报以下错误：

image-20240417181448437

3、完整代码：

js
// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      2024-04-17
// @description  try to take over the world!
// @author       You
// @match        https://www.ysjsxcs.com/histsory
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ysjsxcs.com

+ // @require      https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js

// @grant        none
// ==/UserScript==

// 在页面加载完成后执行代码
(function() {
+ /* globals jQuery, $, waitForKeyElements */

// 在页面加载完成后执行代码
$(document).ready(function() {
    // 使用 jQuery 选择器选择元素，并添加点击事件
    $('#showbook').click(function() {
        // 弹出消息框
        alert('Button clicked!');
    });
});
    
})()

问题： Uncaught TypeError: Cannot read property 'msie' of undefined

image-20240918165611988

  • 使用jquery修改115搜索页面样式后，无法显示工具栏

    image-20240918170308497

  • 点击感叹号小图标，无法弹出属性

    image-20240918170246205

分析： 这是因为从jquery@1.9开始废除了$.browser这个API，推测在猴油中使用jquery时调用了这个API，所以就会报错。

解决：

  • 方法一：使用1.9之前的版本：https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js(OK)
  • 方法二：安装另一个插件：jquery-migrate(测试无效)

axios ​

1、通过@require 引入axios插件的CDN地址

js
// @require      https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js

2、在代码区添加注释：/* globals axios */

否则会报以下错误：

image-20240417181448437

3、代码：

js
  /* 请求bannedActress */
  getBannedActress()
  function getBannedActress() {
    axios.get('http://120.26.226.124:8000/moment/26').then((res) => {
      console.log(res)
    })
  }

问题：the content must be served over HTTPS

sh
userscript.html?name=98%25E5%25A0%2582.user.js&id=b8080489-58aa-4fe3-8893-a06cad3b8401:2 Mixed Content: The page at 'https://wk8v3.app/forum-37-369.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://120.26.226.124:8000/moment/26'. This request has been blocked; the content must be served over HTTPS.

分析： 这是由于访问的API地址，不是https协议。需要升级为https协议。

本地调试 ​

有时候我们想要使用外部编辑器编辑js脚本，此时可以在油猴插件中添加下面的脚本内容，引用外部实际的脚本文件路径。

注意：

  • match、run-at、grant等属性从引用的实际脚本内容中复制。
  • 需要在浏览器中开启油猴插件的允许访问文件网址。
js
// ==UserScript==
// @name         测试
// @description  通过这种方式，可以使用外部编辑器修改js文件。
// @version      1.0.0
// @match        https://*.yourwebsite.com/*
// @require      file://E:\path\to\your\test.user.js
// ==/UserScript==

问题 ​